<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_1322088_ncfesihrjs.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
	</head>
	<style type="text/css">
		.container-fluid{
			overflow-y: auto;
		}
		.main-box label{
			margin: 0;
			font-weight: 100;
		}
		.form-box .fb-box .title{
			width: 18%;
		}
		.form-box .fb-box .main-box .form-controls{
			width: 68%;
		}
		.list-ite{
			display: none;
		}
		.block{
			display: block !important;
		}
		.form-controls.bg-white{
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.main-box>.bg-white>.list-ite{
			position: absolute;
			top: 35px;
			width: 100%;
			background: #fff;
			box-shadow: 0 0 5px 0 #f1f1f1;
			left: 0px;
			max-height: 290px;
			overflow-y: auto;
			z-index: 10;
		}
		.main-box>.bg-white>.list-ite li{
			height: 35px;
			line-height: 35px;
			padding: 0 10px;
			transition: all .3s;
			user-select: none;
		}
		.main-box>.bg-white>.list-ite li:hover{
			color: #13c19f;
			transition: all .3s;
			background-color: #eef1f9;
		}
	</style>
	<body>
		<div class="container-fluid bg-white">
			<div class="gs-box">
				<form class="">
					<div class="gs-box-item">
						<div class="title">公司信息</div>
						<div class="form-box">
							<div class="col-md-6 padding-0">
								<div class="fb-box"><span class="title">*经销商名称</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">经销商编码</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box ">
									<div class="main-box flex">
										<span class="title">*所在部门</span>
										<div class="form-controls bg-white">
											<span>{{checkSelcet3}}</span>
											<i class="iconfont icon-xiangxia"></i>
											<div class="list-ite">
												<ul class="mp00">
													<li v-for="(item,index) in selectList3" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,3)" class="list-none">{{item.name}}</li>
												</ul>
											</div>
										</div>
									</div>
									<div class="main-box flex">
										<span class="title">业务员</span>
										<div class="form-controls bg-white">
											<span>{{checkSelcet4}}</span>
											<i class="iconfont icon-xiangxia"></i>
											<div class="list-ite">
												<ul class="mp00">
													<li v-for="(item,index) in selectList4" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,4)" class="list-none">{{item.name}}</li>
												</ul>
											</div>
										</div>
									</div>
								</div>
								<div class="fb-box"><span class="title">日期时间范围</span><input readonly="true" type="text" style="text-align: center;" class="form-controls layui-input" id="test10" placeholder="开始日期 - 结束日期" /></div>
								<div class="fb-box"><span class="title">区域</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">物流编码</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">经销商标签</span><input type="text" class="form-controls" name="" id="" value="" /></div>
							</div>
							
							<div class="col-md-6 padding-0">
								<div class="fb-box">
									<span class="title">*经销商级别</span>
									<div class="form-controls bg-white">
										<span>{{checkSelcet}}</span>
										<i class="iconfont icon-xiangxia"></i>
										<div class="list-ite">
											<ul class="mp00">
												<li v-for="(item,index) in selectList" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,0)" class="list-none">{{item.name}}</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="fb-box">
									<span class="title">*默认发货仓</span>
									<div class="form-controls bg-white">
										<span>{{checkSelcet1}}</span>
										<i class="iconfont icon-xiangxia"></i>
										<div class="list-ite">
											<ul class="mp00">
												<li v-for="(item,index) in selectList1" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,1)" class="list-none">{{item.name}}</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="fb-box">
									<div class="main-box flex"><span class="title">推荐人</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="main-box flex"><span class="title"></span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
								<div class="fb-box">
									<div class="main-box flex"><span class="title">邮编</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="main-box flex"><span class="title">传真</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
								<div class="fb-box"><span class="title">详细地址</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box">
									<span class="title">*结算方式</span>
									<div class="form-controls bg-white">
										<span>{{checkSelcet5}}</span>
										<i class="iconfont icon-xiangxia"></i>
										<div class="list-ite">
											<ul class="mp00">
												<li v-for="(item,index) in selectList5" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,5)" class="list-none">{{item.name}}</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="fb-box contents"><span class="title">备用信息</span><textarea rows="3" class="form-controls"></textarea></div>
							</div>
						</div>
					</div>
					
					<div class="gs-box-item">
						<div class="title">个人信息</div>
						<div class="form-box">
							<div class="col-md-6 padding-0">
								<div class="fb-box"><span class="title">*姓名</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">职位</span><input type="text" class="form-controls" name="" id="" value="" /></div>
							</div>
							<div class="col-md-6 padding-0">
								<div class="fb-box">
									<div class="main-box flex"><span class="title">*手机</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="main-box flex"><span class="title">电话</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
								<div class="fb-box">
									<div class="main-box flex"><span class="title">Emali</span><input type="text" class="form-controls" name="" id="" value="" /></div>
									<div class="main-box flex"><span class="title">QQ</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="gs-box-item">
						<div class="title flex">财务信息
							<div style="font-size: 14px;color: #777; margin-left: 10px;">
								<input id="dis" name="checkboxopen" type="checkbox"  style="width: 12px;height: 12px;">
							   <label>开通订货账号（开通订货账号，经销商才能进入易订货系统订货）</label>
							</div>
						</div>
						<div class="form-box  in">
							<div class="col-md-6 padding-0">
								<div class="fb-box"><span class="title">*账号</span><input disabled="true" type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">*密码</span><input disabled="true" type="password" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">*确认密码</span><input disabled="true" type="password" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box">
									<div class="main-box flex">
										<input name="checkboxopen" type="checkbox" disabled="true" style="width: 12px;height: 12px;">
										<label>发送订货账号开通邮件</label>
									</div>
									<div class="main-box flex">
										<input name="checkboxopen" type="checkbox" disabled="true" checked style="width: 12px;height: 12px;">
										<label>发送订货账号开通短信</label>
									</div>
								</div>
							</div>
						</div>
					</div>
					
					<div class="gs-box-item">
						<div class="title">财务信息</div>
						<div class="form-box">
							<div class="col-md-6 padding-0">
								<div class="fb-box"><span class="title">发票抬头</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">地址</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">开户名称</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">银行账号</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">上次对账日期</span><input disabled="true" type="text" class="form-controls" name="" id="" value="" /></div>
							</div>
							<div class="col-md-6 padding-0">
								<div class="fb-box"><span class="title">纳税人识别号</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">电话</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box"><span class="title">开户银行</span><input type="text" class="form-controls" name="" id="" value="" /></div>
								<div class="fb-box">
									<span class="title">*账期类型</span>
									<div class="form-controls bg-white">
										<span>{{checkSelcet2}}</span>
										<i class="iconfont icon-xiangxia"></i>
										<div class="list-ite">
											<ul class="mp00">
												<li v-for="(item,index) in selectList2" :class="{active:item.active}" :key="index" @click="checkSel($event,item.name,index,2)" class="list-none">{{item.name}}</li>
											</ul>
										</div>
									</div>
								</div>
								<div class="fb-box"><span class="title">对账初始化</span><input disabled="true" type="text" class="form-controls" name="" id="" value="否" /></div>
							</div>
						</div>
					</div>
					
					<div class="footer-buttom">
						<button id="forBack" type="button">取消</button>
						<button type="button">保存</button>
					</div>
				</form>
			</div>
		</div>
		
		<script src="js/jquery-v3-3.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/new_file.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/Gather.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:".gs-box",
				data:{
					base64Url:"",
					checkSelcet:"请选择",  //经销商级别
					checkSelcet1:"请选择",   //默认发货仓库
					checkSelcet2:"",   //账期类型
					checkSelcet3:"请选择",   //所在部门
					checkSelcet4:"请选择",   //业务员
					checkSelcet5:"请选择",   //结算方式
					
					selectList:[     //..经销商级别
						{
							name:"普通",
							value:"1"
						},
						{
							name:"待签代理",
							value:"2"
						},
						{
							name:"三级代理",
							value:"3"
						},
						{
							name:"二级代理",
							value:"4"
						},
						{
							name:"一级代理",
							value:"5"
						},
					],
					selectList1:[    //..默认发货仓库
						{
							name:"上海",
							value:"1"
						},
						{
							name:"北京",
							value:"2"
						},
						{
							name:"深圳",
							value:"3"
						},
						{
							name:"广州",
							value:"4"
						}
					],
					selectList2:[    //..账期类型
						{
							name:"暂无数据",
						}
					],
					selectList3:[   //..所在部门
						{
							name:"深圳分公司",
							value:"1"
						},
						{
							name:"总部区域",
							value:"2"
						},
						{
							name:"华南分公司",
							value:"3"
						}
					],
					selectList4:[    //..业务员
						{
							name:"乌龟",
							value:"1"
						},
						{
							name:"鳖",
							value:"2"
						},
						{
							name:"王八",
							value:"3"
						},
						{
							name:"甲鱼",
							value:"4"
						}
					],
					selectList5:[
						{
							name:"预付",
							value:"1"
						},
						{
							name:"现付",
							value:"2"
						},
						{
							name:"后付",
							value:"3"
						}
					],
				},
				mounted(){
					for (let i = 0;i<this.selectList.length;i++) {
						this.selectList[i].active = false;
					}
				},
				methods:{
					handlLogo(el){
						console.log(el.target.files[0]);
						var files = el.target.files[0]
						var reader = new FileReader()
						if (/^image/.test( files.type)){
							var reader = new FileReader();
							reader.readAsDataURL(files);
							reader.onloadend = function(){
								console.log(this.result);
								$(".img-box").css({"background-image":"url(" + this.result + ")"})
							}
						}
					},
					checkSel(e,title,index,num){
						if(num == 0){
							this.checkSelcet = title;
						}else if(num == 1){
							this.checkSelcet1 = title;
						}else if(num ==2){
							this.checkSelcet2 = title;
						}else if(num ==3){
							this.checkSelcet3 = title;
						}else if(num ==4){
							this.checkSelcet4 = title;
						}else if(num ==5){
							this.checkSelcet5 = title;
						}
						
						for (let i = 0;i<this.selectList.length;i++) {
							if(i == index){
								this.selectList[i].active = true;
							}else{
								this.selectList[i].active = false;
							}
						}
					}
				}
			})
			
			$(document).ready(function(){
				$('.fb-box .bg-white').on("click",function(){
					$(this).find('.list-ite').toggleClass('block')
				})
			})
			
			//财务信息
			$('#dis').click(function(){
				if(this.checked){
					$('.in .fb-box input').removeAttr('disabled')
				}else{
					$('.in .fb-box input').attr('disabled','disabled')
					
				}
			})
			
			$(function(){
				var height = document.documentElement.clientHeight;
				console.log(height);
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$(window).resize(function(){
				var height = document.documentElement.clientHeight;
				$(".container-fluid").css({"height":(height-34)+"px"})
			})
			
			$("#forBack").click(function(){
				window.history.back(-1); 
			})
			
			layui.use(['form','table','laydate','element'], function(){
				var table = layui.table,
				laydate = layui.laydate,
				form = layui.form,
				element = layui.element
				
				//时间范围选择
				laydate.render({
					elem: '#test10',
					type: 'datetime',
					range: true,
					value:Gather.getTime().YearText+"     -     "+Gather.getTime().YearText,
					format:"yyyy-MM-dd ",
					max:Gather.getTime().value,
					done: function(value, date, endDate){
						console.log(value); //得到日期生成的值，如：2017-08-18
						console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
						console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
					}
				});	
			})
		</script>
	</body>
</html>
